<template>
  <div id="home-head">
    <van-icon class="fenlei" name="fenlei" size="30" color="#fff" class-prefix="icon"/>
    <div class="search" @click="$router.push('/search')">
      <van-icon class="sousuo" name="sousuo" class-prefix="icon" size="28"/>
      <span>搜索商品</span>
    </div>
    <van-icon class="kefu" name="kefu" size="30" color="#fff" class-prefix="icon"/>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
#home-head{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #fa1d61;
  height: 50px;
  display: flex;
  align-items: center;
  .fenlei{
    padding: 0 10px;
  }
  .search{
    flex: 1;
    height: 34px;
    border-radius: 17px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding-left: 15px;
    color: #B0ABA2;
    .sousuo{
      padding-right:10px;
    }
  }
  .kefu{
    padding:0 10px;
  }
}
</style>
